<template>
  <div class="newsItem" @click="goDetial">
    <div class="md">
      <span class="dd">{{ params.createdTime | timeFormatedd }}</span>
      <span class="ym">{{params.createdTime | timeFormateyyyymm }}</span>
    </div>
    <div class="content">
      <span class="title">{{ params.title }}</span>
      <span class="des">{{ params.content | clearEditor}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "newsItem",
  methods:{
    goDetial(){
      let {href} = this.$router.resolve({name:'detail',query:{id:this.params.id}})
      window.open(href,'_blank')
    },
  },
  props:{
    params:{
      default:()=>{}
    }
  }
}
</script>

<style scoped lang="less">
.newsItem{
  display: flex;
  cursor: pointer;
  .content{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title{
      font-size: 2rem;
      color: #333333;
      width: 30rem;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
    }
    .des{
      font-size: 1.7rem;
      color: #999999;
      overflow:hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      margin-bottom: 1rem;
    }
  }
  .md{
    width: 6.7rem;
    height:6.7rem;
    // height:6.7rem;
    background: #F3F3F3;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 1rem;
    .dd{
      font-size: 2.2rem;
      color: #666666;
    }
    .ym{
      font-size: 1.1rem;
      color: #999999;
    }
  }
}
</style>